<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

<!-- 对表单验证提示信息进行格式设置 -->
<style type="text/css">
span {
	color: red;
}
</style>
<!-- 进行表单验证 -->
<script type="text/javascript">
	//进行用户名非空验证
	function checkName() {
		//用户输入的用户名内容
		var txtName = document.getElementById("txtUserName").value;
		//错误提示信息
		var sptxtName = document.getElementById("spName");
		//进行用户名非空验证
		if (txtName == null || txtName == "") {
			//错误提示信息
			sptxtName.innerHTML = "请输入用户名！";
			//改变标志量
			return false;
		} else {
			//清空错误提示信息
			sptxtName.innerHTML = "";
			//改变标志量
			return true;
		}
	}
	//进行密码非空验证
	function checkPsw() {
		//用户输入的密码内容
		var txtPsw = document.getElementById("txtUserPsw").value;
		//错误提示信息
		var sptxtPsw = document.getElementById("spPsw");
		//进行密码非空验证
		if (txtPsw == null || txtPsw == "") {
			//错误提示信息
			sptxtPsw.innerHTML = "请输入密码!";
			//改变标志量
			return false;
		} else {
			//清空错误提示信息
			sptxtPsw.innerHTML = "";
			//改变标志量
			return true;
		}
	}
	//身份选择验证
	function checkId() {
		var radId = document.getElementsByName("inlineRadioOptions");
		var chId = false;
		for (var i = 0; i < radId.length; i++) {
			if (radId[i].checked) {
				chId = true;
				break;
			}
		}
		var spid = document.getElementById("spid");
		if (!chId) {
			spid.innerHTML = "请选择身份！";
			return false;
		} else {
			spid.innerHTML = "";
			return true;
		}
	}
	//提交按钮验证
	function checkMe() {
		var ischName = checkName();
		var ischPsw = checkPsw();
		var ischId = checkId();
		if (ischName && ischPsw && ischId) {
			return true;
		} else {
			return false;
		}
	}
</script>
</head>
<body>
	<!--  下面是jsp(bootstrap效果)页面效果 -->
	<!--用的jsp的include指令获取inc.jsp。里边是bootstrap的框架 -->
	<%@include file="bootstrap/inc/inc.jsp"%>

	<div id="container" align="center">
		<div style="width: 500px;" align="left">
			<h4 align="center">教务系统登录界面</h4>
			<form class="form-horizontal" role="form" action="LoginServlet"
				method="post">
				<div class="form-group">
					<label for="inputEmail3" class="col-sm-2 control-label">用户名</label>
					<div class="col-sm-10">
						<input type="text" class="form-control" id="txtUserName"
							name="txtUserName" placeholder="用户名" onblur="checkName();">
						<div>
							<span id="spName"></span>
						</div>
					</div>
				</div>
				<div class="form-group">
					<label for="inputPassword3" class="col-sm-2 control-label">密&nbsp;&nbsp;&nbsp;&nbsp;码</label>
					<div class="col-sm-10">
						<input type="password" class="form-control" id="txtUserPsw"
							name="txtUserPsw" placeholder="密码" onblur="checkPsw();">
						<div>
							<span id="spPsw"></span>
						</div>
					</div>
				</div>

				<div class="form-group">
					<label for="inputPassword3" class="col-sm-2 control-label">身&nbsp;&nbsp;&nbsp;&nbsp;份</label>
					<div class="col-sm-10">
						<label class="radio-inline"> <input type="radio"
							name="inlineRadioOptions" id="inlineRadio1" value="option1"
							onclick="checkId();"> 学生
						</label> <label class="radio-inline"> <input type="radio"
							name="inlineRadioOptions" id="inlineRadio2" value="option2"
							onclick="checkId();"> 教师
						</label> <label class="radio-inline"> <input type="radio"
							name="inlineRadioOptions" id="inlineRadio3" value="option3"
							onclick="checkId();"> 管理员
						</label>
						<div>
							<span id="spid"></span>
						</div>
					</div>
				</div>


				<!--  
				<div class="form-group">
					<div class="col-sm-offset-2 col-sm-10">
						<div class="checkbox">
							<label> <input type="checkbox"> 下次自动登录
							</label>
						</div>
					</div>
				</div>
				-->
				<div class="form-group">
					<div class="col-sm-offset-2 col-sm-10">
						<button type="submit" class="btn btn-default"
							onclick="return checkMe();">登录</button>
					</div>
				</div>
			</form>
		</div>
	</div>
</body>
</html>